<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>week03 作业</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <style>
        .online-edit-vue {
        display: flex;
        width: 100%;
        height: 100%;
        padding-top: 24px;
    }
    .online-edit-vue .button {
            height: 50px;
            width: 80px;
            margin: 12px;
    }
    .online-edit-vue .result {
            border: 1px solid #d5d5d5;
        }
    .online-edit-vue >div {
            flex: 1;
            height: 90vh;
            
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <script type="text/x-template" id="indexpage">
        <div class="online-edit-vue">
            <div ref="container" class="container" id="container"></div>
            <button class="button" @click="handleRun">运行</button>
            <div class="result" ref="result">
                <p v-show="loading">正在编译中。。。</p>
                <!-- <demo-comp v-if="showComp"></demo-comp> -->
                <iframe ref="iframe" src="/views/result.html" v-show="showComp" style="width: 100%;height: 100%;border: none;" />
            </div>
        </div>
    </script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.staticfile.org/monaco-editor/0.19.3/min/vs/loader.min.js"></script>
    <!-- <script src="/static/online-comp.js"></script> -->
    <script>
        // function dynamicLoadJs(url, callback) {
        //     var onlinecomp = document.querySelector('#online-comp');
        //     onlinecomp && onlinecomp.remove();
        //     var head = document.getElementsByTagName('head')[0];
        //     var script = document.createElement('script');
        //     script.id = 'online-comp';
        //     script.type = 'text/javascript';
        //     script.src = url;
        //     if(typeof(callback)=='function'){
        //         script.onload = script.onreadystatechange = function () {
        //             if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete"){
        //                 callback();
        //                 script.onload = script.onreadystatechange = null;
        //             }
        //         };
        //     }
        //     head.appendChild(script);
        // }

        require.config({ paths: { 'vs': 'https://cdn.staticfile.org/monaco-editor/0.19.3/min/vs' }});
      // 将monaco变量赋值为全局变量
      require(['vs/editor/editor.main'], function() {
        var app = new Vue({
            el: '#app',
            template: '#indexpage',
            data: function() {
                return {
                    monacoInstance: null,
                    loading:false,
                    showComp: false,
                    tmpl: `<template>
    <div>
        <p>hello, {{str}}</p>
    </div>
</template>
<script>
export default {
    name: 'Demo',
    data() {
        return {
            str: 'world'
        }
    },
    methods: {

    }
}
<\/script>
`  
                }
            },
            mounted() {
                this.initEditor()
            },
            methods: {
                initEditor() {
                    this.monacoInstance = window.monaco.editor.create(this.$refs.container, {
                        value: this.tmpl,
                        language: 'vue',
                        minimap: {
                            enabled: false
                        },
                        // theme: 'vs',
                        // selectOnLineNumbers: true,
                        roundedSelection: false,
                        // cursorStyle: 'line',
                        // automaticLayout: false,
                        // glyphMargin: true,
                        // useTabStops: false, 
                        fontSize: 16,
                        autoIndent: false
                    })
                },
                handleRun() {
                    this.loading = true;
                    this.showComp = false;
                    var _content = this.monacoInstance.getModel().getValue();
                    fetch('/api/runfile', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json;charset=utf-8'
                        },
                        body: JSON.stringify({
                            fileContent: _content
                        })
                    }).then((response) => {
                        response.json().then((data) => {
                            this.loading = false;
                            this.showComp = true;
                            this.$refs.iframe.contentWindow.location.reload();
                            // dynamicLoadJs(`${data.data.url}?_${Date.now()}`, () => {
                            //     this.loading = false;
                            //     this.showComp = true; 
                            // })
                        })
                    })
                }
            }
        })
      });
        
    </script>
</body>
</html>